<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        div{
        	width:100px;background: red;margin:10px;height:50px;
        }
	</style>
	<script type="text/javascript">
	    window.onload = function(){
            var oDiv = document.getElementsByTagName('div');

            for(var i=0;i<oDiv.length;i++){
            	//为了避免同时使用一个定时器运行时出现冲突，可以给每个物体设置一个定时器
            	oDiv[i].timer = null;
            	oDiv[i].onmouseover = function(){
                    startMove(this,400);
            	}

            	oDiv[i].onmouseout = function(){
                    startMove(this,100);
            	}
            }
	    }

	    var timer = null;
        function startMove(obj,iTarget){
        	
        	clearInterval(obj.timer);  //这里改为obj.timer
        	obj.timer = setInterval(function(){
        		var speed = (iTarget-obj.offsetWidth)/6;
        		speed = speed>0?Math.ceil(speed):Math.floor(speed);

        		if(obj.offsetWidth == iTarget){
        			clearInterval(obj.timer);   //每个定时器与div一一对应，互不干扰
        		}else{
                    obj.style.width = obj.offsetWidth+speed+'px';
        		}

        	}, 30);
        }
	</script>
</head>
<body>
	
	<div></div>
	<div></div>
	<div></div>

</body>
</html>